<template>
  <div class="Coffee">
    <Aplayer style="width:100%" :music="musicList[0]" autoplay />
    <div class="bgImage container" tabIndex="0">
      <div :class="photoImgClass"></div>
      <!-- <div class="instructions">小文文成长日记</div> -->
      <div class="shutter" style="--flaps: 6">
        <div class="flap" style="--i: 0"></div>
        <div class="flap" style="--i: 1"></div>
        <div class="flap" style="--i: 2"></div>
        <div class="flap" style="--i: 3"></div>
        <div class="flap" style="--i: 4"></div>
        <div class="flap" style="--i: 5"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Aplayer from 'vue-aplayer';
export default {
  components: {
    Aplayer,
  },
  data() {
    return {
      musicList: [
        {
          src: require('@/assets/music/xiaojiuwo.mp3'),
        },
      ],
      photoImgClass: 'photoImg1 photo',
    };
  },
  destroyed() {
    clearInterval(this.timeInter);
  },
  mounted() {
    let index = 2;
    this.timeInter = setInterval(() => {
      if (index > 8) {
        index = 1;
      }
      console.log(index);
      this.photoImgClass = `photoImg${index} photo`;
      index++;
    }, 5900);
  },
};
</script>

<style lang="scss" scoped>
.Coffee {
  width: 100%;
  height: 100%;
  overflow: hidden;
  /deep/ .aplayer {
    width: 100%;
    opacity: 0;
    position: absolute;
  }

  .bgImage {
    background-image: url('../assets/images/photobg.jpg');
  }

  .photoImg1 {
    background-image: url('../assets/images/wen01.jpg');
  }
  .photoImg2 {
    background-image: url('../assets/images/wen02.jpg');
  }
  .photoImg3 {
    background-image: url('../assets/images/wen03.jpg');
  }
  .photoImg4 {
    background-image: url('../assets/images/wen04.jpg');
  }
  .photoImg5 {
    background-image: url('../assets/images/wen05.jpg');
  }
  .photoImg6 {
    background-image: url('../assets/images/wen06.jpg');
  }
  .photoImg7 {
    background-image: url('../assets/images/wen07.jpg');
  }
  .photoImg8 {
    background-image: url('../assets/images/xiong08.jpg');
  }

  .container {
    cursor: pointer;
    background-position: center center;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .container:focus {
    display: none;
  }

  .flap {
    width: 150vmax;
    height: 150vmax;
    position: absolute;
    bottom: 50%;
    right: 50%;
    pointer-events: none;
    will-change: transform;
    background: hsl(calc(1turn * var(--p)), 80%, 80%);
    background: linear-gradient(35deg, #555, black);
    border: solid 4px #999;
    --p: calc(var(--i) / var(--flaps));
    -webkit-animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;
    animation: click 0.9s cubic-bezier(0.5, 0, 0.5, 1) 0.1s;
    transform-origin: bottom right;
    transform: rotate(-0.5turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(-100%)
      translateY(90%);
  }
  @-webkit-keyframes click {
    48%,
    52% {
      transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%)
        translateY(0%);
    }
  }
  @keyframes click {
    48%,
    52% {
      transform: rotate(-0.25turn) rotate(calc(1turn * var(--p))) skewX(30deg) translateX(0%)
        translateY(0%);
    }
  }

  .photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    box-shadow: 0 10px 40px #000;
    margin: -1rem;
    margin-bottom: -5rem;
    border: solid 1rem #fff;
    border-bottom-width: 5rem;
    -webkit-animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both;
    animation: photo 5s cubic-bezier(0.5, 0, 0.5, 1) 0.9s both infinite;
  }
  @-webkit-keyframes photo {
    30%,
    60%,
    70% {
      filter: sepia(30%) saturate(140%) contrast(120%);
      transform: scale(0.5) rotate(-4deg);
    }
    61% {
      opacity: 1;
    }
    71% {
      opacity: 0;
      transform: none;
    }
    100% {
      filter: none;
      opacity: 1;
    }
  }
  @keyframes photo {
    30%,
    60%,
    70% {
      filter: sepia(30%) saturate(140%) contrast(120%);
      transform: scale(0.5) rotate(-4deg);
    }
    61% {
      opacity: 1;
    }
    71% {
      opacity: 0;
      // transform: none;
    }
    100% {
      filter: none;
      opacity: 1;
    }
  }

  .instructions {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    padding: 1rem;
    font-family: monospace;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: bold;
    font-family: '楷体';
    text-shadow: 0.2rem 0rem 0.5rem pink, -0.2rem 0rem 0.5rem pink, 0rem 0.2rem 0.5rem pink,
      0rem -0.2rem 0.5rem pink;
    color: #f5bbf3;
  }
}
</style>